<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shopping.css">
    <script src="js/shopping.js"></script>
</head>
<body>
    <div class="box">
        <div class="container" id="container">
            <!-- 购物车标题 -->
            <div class="shoppingCar"><a href="index.html">首页</a><h1>购物车</h1></div>
            <!-- 分割线 -->
            <div class="divider"></div>
            <!-- 头部开始 begin -->
            <div class="header">
                <label for="checkAll" class="ckAll">
                    <input type="checkbox" class="checkAll" id="checkAll">
                    全选
                </label>
                <ul>
                    <li>商品</li>
                    <li>单价(元)</li>
                    <li>数量</li>
                    <li>金额(元)</li>
                </ul>
            </div>
            <!-- 头部结束 end -->
            
            <!-- 产品开始 begin -->
            <div class="products" id="products">
                <div class="product">
                    <div class="description">
                        <input type="checkbox" >
                        <a href="javascript:void(0)"><img src="imges/男友礼物2.jpg"></a>
                        <p>迷你的AJ乔丹鞋外形，其实它是一个充电宝，可当挂件佩戴，个性炫酷，小巧轻便方便随身携带，潮人必备的充电宝喔。<br>不支持无理由退货</p>
                        <span class="price">99</span>
                    </div>
                    <div class="num">
                        <div class="nums">
                            <span class="reduce">-</span>
                            <input type="text" value="1">
                            <span class="add">+</span>
                        </div>
                        <span class="cost">99</span>
                    </div>
                </div>
                <div class="product">
                        <div class="description">
                            <input type="checkbox" >
                            <a href="javascript:void(0)"><img src="imges/商务职场3.jpg"></a>
                            <p>牛在中国传统文化中寓意着“吉祥、 喜庆”，铜牛更有招财进宝、 鸿运当头之意，是送给炒股人士、生意人士的最吉祥礼物。<br>不支持无理由退货</p>
                            <span class="price">688</span>
                        </div>
                        <div class="num">
                            <div class="nums">
                                <span class="reduce">-</span>
                                <input type="text" value="1">
                                <span class="add">+</span>
                            </div>
                            <span class="cost">688</span>
                        </div>
                </div>
                <div class="product">
                        <div class="description">
                            <input type="checkbox" >
                            <a href="javascript:void(0)"><img src="imges/女友礼物1.jpg"></a>
                            <p>提供您自己的照片，商家会为您定制出一副上千个不同编号的圆点图，然后自己动手将对应编号的图J插入图纸上的圆点，画面就会慢慢地呈现在你面前。定制你心目中最喜欢的TA<br>不支持无理由退货</p>
                            <span class="price">178</span>
                        </div>
                        <div class="num">
                            <div class="nums">
                                <span class="reduce">-</span>
                                <input type="text" value="1">
                                <span class="add">+</span>
                            </div>
                            <span class="cost">178</span>
                        </div>
                </div>
                <div class="product">
                        <div class="description">
                            <input type="checkbox" >
                            <a href="javascript:void(0)"><img src="imges/挚友同学1.jpg"></a>
                            <p>可以根据您的要求定制的水晶奖杯，中国好兄弟奖、中国好女友....给你的ta颁发一个大大的奖杯吧。<br>不支持无理由退货</p>
                            <span class="price">109</span>
                        </div>
                        <div class="num">
                            <div class="nums">
                                <span class="reduce">-</span>
                                <input type="text" value="1">
                                <span class="add">+</span>
                            </div>
                            <span class="cost">109</span>
                        </div>
                </div>
            </div>
            <!-- 产品结束 end -->

            <!-- 结算行开始 begin -->
            <div class="footer">
                <label class="ckAll">
                    <input type="checkbox" class="checkAll" id="checkFull">
                    全选
                </label>
                <span class="del">删除</span>
                <div>
                    <h3>已选商品&nbsp;<i class="number">0</i>&nbsp;件</h3>
                    <h3>合计：<b class="priceTotal">0</b></h3>
                    <input type="button" class="account" value="立即结算">
                </div>
            </div>
            <!-- 结算行结束 end -->
        </div>
    </div>
</body>
</html>